
<style>
  .chess-board {
    width: 1160px;
    height: 760px;
    background-color: bisque;
    position: relative;
  }
  .board-canvas{
    width: 760px;
    height: 760px;
    float: left;
  }
  .user-info{
    margin-top: 60px;
    float: left;
  }
  .form-group{position: relative;}
  .form-group:after{ content: "";display: block;float: none; }
  .login-button{
    width: 240px;
    height: 40px;
    background-color: darkseagreen;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
</style>

<template>
  <div>
    <div class="chess-board">
      <svg class="board-canvas">
        <path :d="line" v-for="line in chessboard.lines" stroke="black" fill="none" stroke-width="1"></path>
      </svg>
      <piece v-for="point in chessboard.points" :key="point.id"
             v-bind="{id: point.id, location: point.location, piece: point.piece, marker: point.marker}"
             @action="play"></piece>
      <div class="user-info">
        <div v-if="!start">
          <div class="form-group">
            <div class="login-button" @click="connect" title="开始游戏">开始游戏</div>
          </div>
        </div>
        <div v-if="start">
          <div>剩余棋子： 9</div>
          <div>状态： 1</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Chessboard} from '@/assets/js/Chessboard'
  import piece from '@/components/piece'

  export default {
    name: 'chessboard',
    data () {
      return {
        chessboard: new Chessboard(),
        socket: {},
        start: false,
        turn: false,
        operate: 'put',
        user_id: 0
      }
    },

    components: {
      piece,
    },

    computed :{
      is_start(){
        return this.start;
      },

      is_turn(){
        return this.turn;
      }
    },

    created: function () {
      let user = {
        userId: 10000001,
      };
      sessionStorage.setItem('user', JSON.stringify(user));
    },

    methods: {
      connect: function () {
        // this.turn = true;
        // this.start = true;
        console.log('Connect to server...');
        if ("WebSocket" in window){
          let socket = new WebSocket("ws://localhost:8020/");
          socket.onopen = function(){
            console.log('连接服务器成功！');
          };

          socket.onmessage = (evt) => {
            let message = evt.data;
            console.log('从服务器接收到消息： ' + message);

            let response = JSON.parse(message);
            this.handle_message(response);
          };
          socket.onclose = function(){
            console.log("连接已关闭...");
          };
          this.socket = socket;
        }else {
          alert('对不起，您的浏览器不支持本游戏。');
        }
      },

      handle_response: function(response){

      },

      handle_message: function(response){
        let code = response.code;
        if(0 === code){
          let status = response.status;
          if('sign' === status){
            this.user_id = response.id;
            this.socket.send(JSON.stringify({user: this.user_id}))
          }else if("match" === status){
            if(response.opponent){
              this.start = true;
              this.turn = response.turn;
              if(this.turn){
                console.log('该你下棋了！');
              }
            }else {
              console.log('您已加入匹配队列！');
            }
          }else if('play' === status){
            this.chessboard.handle(response);
            this.turn = response.turn;
          }else if('over' === status){
            console.log('游戏结束！');
          }else {
            console.log('不能识别的消息！');
          }
        }else {
          console.log(code);
        }
      },

      play: function (id) {
        console.log('turn = ' + this.is_turn);
        if(this.turn){
          console.log('chess play');
          if(this.operate === 'put'){
            let message = JSON.stringify({code: 'chess_put', location: id});
            console.log("发送消息： "+ message);
            this.socket.send(message);
          }else if(this.operate === 'kill'){
            let message = JSON.stringify({code: 'chess_kill', location: id});
            console.log("发送消息： "+ message);
            this.socket.send(message);
          }else if(this.operate === 'move'){
            console.log('chess move..');
          }else {
            console.log('Error game status: ' + this.operate);
          }
        }
      }
    }
  }
</script>
